<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('收租统计')" />
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li class="select-time">
                            <label>收租时间： </label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="onSearch()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>柱状图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">选项1</a>
                                </li>
                                <li><a href="#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-bar-chart"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>饼状图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">选项1</a>
                                </li>
                                <li><a href="#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-pie-chart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: echarts-js" />
    <script type="text/javascript">
        var prefix = ctx + "system/expenseStat";

        function onSearch() {
            var startTime = $("#startTime").val();
            var endTime = $("#endTime").val();
            barPie(startTime,endTime);
        }

        // function remind() {
        //     $.ajax({
        //         url:ctx + "system/higher/remind",    //请求的url地址
        //         dataType:"json",   //返回格式为json
        //         async:true,//请求是否异步，默认为异步，这也是ajax重要特性
        //         data:{},    //参数值
        //         type:"GET",   //请求方式
        //         success:function(data){
        //             if(data!=null){
        //                 $.modal.alertWarning('您有租户即将到涨租日期-请前往涨租管理进行涨租！')
        //             }
        //         },
        //         error:function(){
        //             //请求出错处理
        //         }
        //     });
        // }

        $(function() {
            barPie(null,null);
            remind();
        });

	    function barPie(startTime,endTime) {
            var barXAxisData=[];
            var barSeries=[];
            var barSeriesReal=[];
            var pieLegendData=[];
            var pieSeries=[];
            $.ajax({
                url:prefix+"/statData",    //请求的url地址
                dataType:"json",   //返回格式为json
                async:true,//请求是否异步，默认为异步，这也是ajax重要特性
                data:{"startTime":startTime,"endTime":endTime},    //参数值
                type:"POST",   //请求方式
                success:function(data){
                    for (var i = 0; i < data.data.barBuildingName.length; i++) {
                        barXAxisData.push(data.data.barBuildingName[i]);
                        barSeries.push(data.data.barMonthFee[i]);
                        barSeriesReal.push(data.data.barRealMonthFee[i]);
                    }
                    for (var j = 0; j < data.data.pieFeeTypeName.length; j++) {
                        pieLegendData.push(data.data.pieFeeTypeName[j]);
                        pieSeries.push(data.data.pieTotaFeelList[j]);
                    }

                    //柱状图渲染
                    var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
                    barChart.setOption(baroption);
                    window.onresize = barChart.resize;
                    //饼状图渲染
                    var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
                    pieChart.setOption(pieoption);
                    $(window).resize(pieChart.resize);
                },
                error:function(){
                    //请求出错处理
                }
            });
            var baroption = {
                title : {
                    text: '各楼栋应收费用和实收费用'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['应收费用','实收费用']
                },
                grid:{
                    x:30,
                    x2:40,
                    y2:24
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : barXAxisData
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'应收费用',
                        type:'bar',
                        data:barSeries,
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name:'实收费用',
                        type:'bar',
                        data:barSeriesReal,
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name : '平均值'}
                            ]
                        }
                    }
                ]
            };
            var pieoption = {
                title : {
                    text: '累计收费',
                    subtext: '收租统计',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    data:pieLegendData
                },
                calculable : true,
                series : [
                    {
                        name:'收费类别',
                        type:'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:pieSeries
                    }
                ]
            };
	    };
    </script>
</body>
</html>